<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.watch版本</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js//vue.js"></script>
    <script src="./mv.js"></script>
    <link rel="stylesheet" href="./mv.css" />
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app" class="mv">
      <input type="search" v-model="search" />
      <ul>
        <li v-for="(item, index) in arr2">
          <img :src="item.cover" alt="" />
          <h2>{{item.name.length>10?item.name.slice(0,10)+'...':item.name}}</h2>
          <h3>
            {{item.artistName.length>6?item.artistName.slice(0,6):item.artistName}}
          </h3>
        </li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    new Vue({
      el: "#app",
      data: {
        arr: arr,
        arr2: [],
        search: "",
      },
      watch: {
        search: {
          immediate: true,
          handler(newValue) {
            let newmv = this.arr.filter((item) => {
              return item.name.indexOf(newValue)||item.artistName.indexOf(newValue) !== -1;
            });
            this.arr2 = newmv;
          },
        },
      },
    });
  </script>
</html>
